<template>
	<Table :columns="column" :data="data">
		<template v-slot:other="{ row, index }">
			<Button type="primary" @click="show(row)">{{ row.other }}</Button>
		</template>
	</Table>
	<Row justify="end" style="margin-top:10px">
		<Page :total="30" show-sizer @on-change="onChange" />
	</Row>
</template>
<script>
export default {
	data() {
		return {
			column: [{
				title: '栏目1',
				key: 'name'
			}, {
				title: '栏目2',
				key: 'age'
			}, {
				title: '栏目3',
				key: 'other',
				slot: 'other'
			}, {
				title: '栏目4',
				key: 'other2',
			}],
			data: [{
				name: '姓名1',
				age: 10,
				other: '其他',
				other2: '其他2'
			}, {
				name: '姓名2',
				age: 11,
				other: '其他2',
				other2: '其他2'
			}, {
				name: '姓名3',
				age: 12,
				other: '其他3',
				other2: '其他2'
			}],
		}
	},
	methods: {
		show(row) {
			this.$Message.info(row.other);
		},
		onChange(e) {
			console.log(e);
		}
	}
}
</script>

<style lang="scss" scoped></style>